<script lang="ts" setup>
import dayjs from "dayjs";

const props = defineProps<{
  orderInfo: OrderInfoResp;
  expired: boolean;
}>();

/** 订单状态 */
const orderStatus = computed(() => {
  return props.expired
    ? "已过期"
    : {
        1: "待支付",
        2: "已支付",
        3: "已取消",
      }[props.orderInfo.status];
});

/** 订单创建时间 */
const createTime = computed(() => {
  return dayjs(props.orderInfo.createTime).format("YYYY/MM/DD HH:mm:ss");
});

/** 展示的字段 */
const fields = computed(() => {
  return [
    {
      name: "订单状态",
      value: orderStatus.value,
    },
    {
      name: "订单编号",
      value: props.orderInfo.orderNo,
    },
    {
      name: "下单时间",
      value: createTime.value,
    },
  ];
});
</script>

<template>
  <div class="mx-3 mt-5 p-3 rd-lg bg-white">
    <h2 class="text-lg c-gray-7 pb-3">订单信息</h2>
    <div class="flex flex-col gap-2 text-base c-gray">
      <div v-for="item in fields" :key="item.name" class="flex justify-between">
        <span>{{ item.name }}:</span>
        <span class="c-gray-5">{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>
